import React from 'react';
import { render } from 'react-dom';

// const oUl = <ul>
//     <li>1111111</li>
//     <li>22222222</li>
//     <li>333333333</li>
// </ul>

let str = "string";
let num = 8888888;

// 特殊的
let flag = true;
let flag2 = false;

let und = undefined;
let nulls = null;

// 引用类型
// 数组会自动展开
let arr = [1, 2, 3, 4, 5];
// 对象  (对象不能作为react的一个子元素)
let obj = {
    name: "张三"
};

let arr2 = [111, 222, 333, [444, 555, [666]]];
let arr3 = [{
    name: "张三"
}, {
    name: "李四"
}];

// const oUl = <ul>
//     <li>字符串：{ str }</li>
//     <li>数字：{ num }</li>
//     <li>布尔值：{ flag } --- { flag2 }</li>
//     <li>undefined：{ und }</li>
//     <li>null{ nulls }</li>
//     <li>
//         数组: { arr }
//     </li>
//     <li>
//         数组2: { arr2 }
//     </li>
//     <li>
//         数组3: { arr3 }
//     </li>
//     <li>
//         对象: { obj }
//     </li>
// </ul>


let li1 = React.createElement(
    'li',
    null,
    '1'
);
let arrs = [React.createElement(
    'li',
    null,
    '1'
), React.createElement(
    'li',
    null,
    '2'
), React.createElement(
    'li',
    null,
    '3'
)];

// 循环  
// const oUl = <ul>
//     {
//         arr.map(item => {
//             return <li>
//                 { item }
//             </li>
//         })
//     }
// </ul>

// v-show   v-if
// let age = 15
// const oUl = <div>
//     {
//         age >= 18? <h1>成年</h1>: <h1>未成年</h1>
//     }
// </div>

// let age = 15
// let a = <h1>成年</h1>
// let b = <h1>未成年</h1>
// const oUl = <div>
//     {
//         age >= 18? a : b 
//     }
// </div>

// let id = "iddddd"

// const oUl = <div id={ id }>
//     <h3>
//         ID
//     </h3>
// </div>


render(oUl, document.getElementById('root'), () => {
    console.log('挂载成功');
});

// 前端服务
